<template>
  <div id="app">
    <!-- 插值表达式，其中可以放数据项，三元表达式，对象.属性  （最常用） -->
    <p>{{ uname }}</p>

    <!-- 标签的v-html属性，相当于innerHTML的意思 ，会覆盖掉原本的内容（次常用）-->
    <p v-html="info">简介：</p>

    <!-- 标签的v-text属性，相当于innerText的意思 ，会覆盖掉原本的内容-->
    <p v-text="uname"></p>

    <!-- 属性绑定指令 v-bind  可以将属性值（url）转换成 对应的数据项值 -->
    <img v-bind:src="url" alt="" />

    <!-- 时间绑定指令 v-on:时间名="事件处理程序"  v-on可以简化为@符号 -->
    <!-- 如果代码非常简单，可以直接写到template这个区域里面 -->
    <!-- age是下面定义的data数据 -->
    <!-- <button v-on:click="age++" v-html="age"></button> -->
    <!-- changeAge是methods节点定义的函数 -->
    <!-- <button v-on:click="changeAge" v-html="age"></button> -->
    <!-- 翻转字符 -->
    <button v-on:click="changeAge">反转</button>
    <label v-html="uname"></label>
  </div>
</template>

<script>
//import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  // data节点用于存储数据
  //data要写成函数形式，函数中要返回一个对象
  data() {
    return {
      //页面中用到的数据
      uname: "123",
    };
  },
  // methods是储存方法的
  methods: {
    //定义一个方法
    changeAge() {
      //vue中，找data数据。methods方法等，都是通过 this直接找【vue中固定的写法】
      this.uname = this.uname.split("").reserve().join("");
    },
  },
};
</script>

<style>
</style>
